<template>
    <div class="container">
        <el-table class="el-table1" align="center" :data="bloglist" stripe style="width: 100%">
            <el-table-column prop="id" label="ID" width="100">
            </el-table-column>
            <el-table-column prop="blogName" label="Blog Name" width="150">
            </el-table-column>
            <el-table-column prop="brief" label="Brief" width="200">
            </el-table-column>
            <el-table-column prop="createTime" label="Create Time" width="150">
            </el-table-column>
            <el-table-column prop="tags" label="Tags" width="150">
            </el-table-column>
            <el-table-column prop="lastUpdateTime" label="Last Update Time" width="150">
            </el-table-column>
            <el-table-column v-if="wo === bieren" label="Actions" width="200">
                <template v-slot="scope">
                    <el-button size="mini" type="primary" @click="repair(scope.row.id)">修改</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script>

import axios from "axios";

export default {

    data() {
        return {
            wo: localStorage.getItem('userId'),
            bieren: localStorage.getItem('userpageId'),
            bloglist: [{


            }]
        }
    },

    created() {
        this.fetchBlogs()
    },
    methods: {
        fetchBlogs() {
            axios({
                url: "/api/blog/getByUid",
                method: 'post',
                headers: {
                    "HOSHINO_T_KK": localStorage.getItem("userToken"),
                },
                data: {
                    user_id: localStorage.getItem('userpageId'),
                    need_page: 1,
                    page_size: 10
                }
            })
                .then(response => {
                    console.log(response);
                    console.log(response.data.data.dataList);
                    this.bloglist = response.data.data.dataList;
                })
                .catch(error => {
                    console.error('Error ', error);
                })
        },
        repair(id) {
            this.$router.push({ path: '/blogUpdate', query: { id: id } });
        },
        handleDelete(id) {
            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    url: "/api/blog/delUserBlog",
                    method: 'post',
                    headers: {
                        "HOSHINO_T_KK": localStorage.getItem("userToken"),
                    },
                    data: {
                        blog_id: id
                    }
                })
                    .then(response => {
                        console.log(response);
                        this.fetchBlogs();
                    })
                    .catch(error => {
                        console.error('Error ', error);
                    })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
    }
}


</script>

<style scoped>
.container {
    margin-left: 10%;
    background-color: white;
    height: 100%;
    width: 80%;
}
</style>
